import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
// import Home from '../views/Home.vue'
import Layout from '@/layout/index.vue';

const constantRoutes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'layout',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import(/* webpackChunkName:'dashboard' */'@/views/dashboard/index.vue'),
        meta: {
          title: 'Dashboard',
          // icon: 'dashboard'
          icon: 'el-icon-platform-eleme',
          affix: true
        }
      }
    ]
  },
  {
    path: '/redirect',
    component: Layout,
    meta: {
      hidden: true
    },
    children: [
      { // 带参数的动态路由正则匹配 文档说明
        // https://next.router.vuejs.org/zh/guide/essentials/route-matching-syntax.html#%E5%8F%AF%E9%87%8D%E5%A4%8D%E7%9A%84%E5%8F%82%E6%95%B0
        path: '/redirect/:path(.*)', // 要匹配多级路由 应该加*号
        component: () => import('@/views/redirect/index.vue')
      }
    ]
  },
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
  // 以下都是测试路由 测完可以删了
  {
    path: '/menu',
    name: 'Menu Management1',
    component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
    meta: {
      title: 'Menu Management1',
      hidden: false,
      breadcrumb: false
    }
  },
  {
    path: '/role',
    name: 'Role Management1',
    component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
    meta: {
      title: 'Role Management1',
      hidden: false
    }
  },
  {
    path: '/user',
    name: 'User Management1',
    component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
    meta: {
      title: 'User Management1'
    }
  },
  {
    path: '/menu',
    name: 'Menu Management2',
    component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
    meta: {
      title: 'Menu Management2',
      hidden: false,
      breadcrumb: false
    }
  },
  {
    path: '/role',
    name: 'Role Management2',
    component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
    meta: {
      title: 'Role Management2',
      hidden: false
    }
  },
  {
    path: '/user',
    name: 'User Management2',
    component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
    meta: {
      title: 'User Management2'
    }
  },
  {
    path: '/menu',
    name: 'Menu Management3',
    component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
    meta: {
      title: 'Menu Management3',
      hidden: false,
      breadcrumb: false
    }
  },
  {
    path: '/role',
    name: 'Role Management3',
    component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
    meta: {
      title: 'Role Management4',
      hidden: false
    }
  },
  {
    path: '/user',
    name: 'User Management3',
    component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
    meta: {
      title: 'User Management3'
    }
  },
  {
    path: '/menu',
    name: 'Menu Management4',
    component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
    meta: {
      title: 'Menu Management4',
      hidden: false,
      breadcrumb: false
    }
  },
  {
    path: '/role',
    name: 'Role Management4',
    component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
    meta: {
      title: 'Role Management4',
      hidden: false
    }
  },
  {
    path: '/user',
    name: 'User Management4',
    component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
    meta: {
      title: 'User Management4'
    }
  },
  {
    path: '/role',
    name: 'Role Management5',
    component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
    meta: {
      title: 'Role Management5',
      hidden: false
    }
  },
  {
    path: '/user',
    name: 'User Management5',
    component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
    meta: {
      title: 'User Management5'
    }
  }
];

// 动态路由,异步获取的路由？
export const asyncRoutes: Array<RouteRecordRaw> = [
  {
    path: '/documentation',
    component: Layout,
    redirect: '/documentation/index',
    meta: {
      hidden: false,
      noCache: true
    },
    children: [{
      path: 'index',
      name: 'Documentation',
      component: () => import('@/views/documentation/index.vue'),
      meta: {
        title: 'Documentation DocumentationDocumentationDocumentation',
        icon: 'documentation',
        activeMenu: '/guide/index'
      }
    }]
  },
  {
    path: '/guide',
    component: Layout,
    meta: {
      title: 'guideFather',
      icon: 'lock',
      alwaysShow: false, // 根路由始终显示，哪怕只有一个子路由
      activeMenu: '/documentation/index'
    },
    redirect: '/guide/index',
    children: [
      {
        path: 'index',
        name: 'Guide',
        component: () => import(/* webpackChunkName: "guide" */ '@/views/guide/index.vue'),
        meta: {
          title: 'Guide 增长长度',
          icon: 'guide'
        }
      }
    ]
  },
  {
    path: '/system',
    component: Layout,
    redirect: '/system/user',
    meta: {
      title: 'System',
      icon: 'lock'
    },
    children: [
      {
        path: 'menu',
        component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
        meta: {
          title: 'Menu Management',
          icon: 'list'
        },
        children: [
          {
            path: 'test',
            component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
            meta: {
              title: 'Role Management',
              icon: 'list'
            }
          },
          {
            path: 'test1',
            component: () => import(/* webpackChunkName: "role" */ '@/views/system/user.vue'),
            meta: {
              title: 'Role Management',
              icon: 'lock'
            }
          }
        ]
      },
      {
        path: 'role',
        name: 'role',
        component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
        meta: {
          title: 'Role Management',
          icon: 'list'
        }
      },
      {
        path: 'user',
        name: 'user',
        component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
        meta: {
          title: 'User Management',
          icon: 'list',
          hidden: false
        }
      }
    ]
  },
  { // 外链路由
    path: '/external-link',
    component: Layout,
    name: 'xxx',
    meta: {
      title: 'extFather',
      icon: 'edit',
      alwaysShow: false
    },
    children: [
      {
        path: 'https://www.baidu.com/',
        redirect: '/',
        meta: {
          title: 'External Link',
          icon: 'link'
        }
      }
    ]
  }
];

export const routes = [
  ...constantRoutes,
  ...asyncRoutes
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

export default router;
